<template>
    <h1>管理员列表</h1>
    <el-table :data="adminlist" style="width: 100%">
        <el-table-column prop="adminid" label="管理员编号" width="180" />
        <el-table-column prop="adminname" label="姓名" width="180" />
        <el-table-column prop="role" label="角色" width="180">
            <template #default="scope">
                <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-popconfirm title="亲，您真的要删除吗?" @confirm="deleteAdmin(scope.row.adminid)" v-if="crud.charAt(3)==='1'">
                    <template #reference>
                        <el-button type="danger" :icon="Delete" circle />
                    </template>
                </el-popconfirm>
                <el-button type="primary" :icon="Edit" circle @click="editShowFn(scope.row.adminname)" v-if="crud.charAt(2)==='1'"/>
            </template>
        </el-table-column>
    </el-table>
    <!-- 子组件 -->
    <ed :adminname="editAdminName" @hide="hideFn" @updatesuccess="successFn" v-show="isShowEdit"></ed>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue";
import { admin_admin_list, admin_admin_delete,} from "../../../utils/api";
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"

// 导入子组件
import ed from "./editadmin.vue";
// 路由  不需要了
// import { useRouter } from 'vue-router';
// const $router = useRouter();
// icon图标导入
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

import {useRoute} from "vue-router";
const $router = useRoute();
const crud:string = ($router.meta.crud as string);
// 定义类型
interface Iadmin {
    "adminname": string,
    "password": string,
    "adminid": string,
    "checkedKeys": string[],
    "role": number   //1表示的是超级管理员，2表示的是普通管理员
}
const adminlist = reactive<Iadmin[]>([])
// 1.获取管理员信息列表
const bb = ()=>{
    admin_admin_list().then((res: any) => {
  if (res.data.code === "200") {
    adminlist.length=0
    adminlist.push(...res.data.data)
  }
});
}
bb()
// 2.删除管理员信息列表
const deleteAdmin=(adminid:string)=>{
    admin_admin_delete({adminid}).then((res: any) => {
  if (res.data.code === "200") {
    ElNotification({
        title:"提示",
        message: "删除成功",
        type: "success",
    })
    bb()
    // $router.go(0)  //不需要了
  }
});
}
// 3.传给子组件的数据
// 父组件需提前在子组件身上定义一个自定义属性
const isShowEdit = ref(false);//控制修改组件的显示和隐藏
const editAdminName = ref("");//要修改的 管理员姓名
const editShowFn=(adminname:string)=>{
    editAdminName.value = adminname;
    isShowEdit.value=true;
    // console.log(editAdminName.value);
    // console.log(adminname);
}
// 子传父的话
// 父组件需提前在子组件身上绑定一个自定义事件
const hideFn=()=>{
    isShowEdit.value=false
}
// 当修改成功后重新获取数据
const successFn = ()=>bb();
</script>
<style scoped>
</style>